<template>
  <div v-loading="loading">
    <!-- 公司 -->
    <el-card class="tree-card">
      <TreeTool :node-data="companyInfo" :is-company="true" />
      <hr>
      <!-- 部门列表 -->
      <el-tree :data="depts" :props="defaultProps" default-expand-all :expand-on-click-node="false">
        <template #default="{data}">
          <TreeTool :node-data="data" @visibleFn="visibleFn" @reloadPage="reloadPage()" @editVisible="editVisible" /></template>
      </el-tree>
    </el-card>
    <AddDepts ref="addDepts" :dialog-visible.sync="dialogVisible" :node-data="nodeData" @reloadPage="reloadPage()" />
  </div>
</template>

<script>
import TreeTool from './components/tree-tool.vue'
import AddDepts from './components/add-depts.vue'
import { getDepartmentInfo } from '@/api/department'
import { tree } from '@/utils'
export default {
  components: { TreeTool, AddDepts },
  data() {
    return {
      companyInfo: {
        name: '江苏传智播客教育科技股份有限公司',
        manage: '负责人'
      },
      defaultProps: {
        label: 'name'
      },
      depts: [],
      // 弹框
      dialogVisible: false,
      nodeData: {},
      loading: false
    }
  },
  async created() {
    this.reloadPage()
  },
  methods: {
    // 点击添加时将对话框弹出
    visibleFn(nodeData) {
      this.dialogVisible = true
      // 重新赋值传给子组件，才能接收到数据
      this.nodeData = nodeData
    },
    // 刷新页面
    async reloadPage() {
      this.loading = true
      const { depts } = await getDepartmentInfo()
      // 获取到一个对象
      console.log('部门列表', depts)
      // this.depts = depts
      this.depts = tree(depts, '')
      this.loading = false
    },
    // 编辑功能
    async editVisible(editData) {
      // 父组件接收到通知后，通过ref调用子组件的方法
      // 避免闪烁需要先等待请求发送完毕
      await this.$refs.addDepts.getDeptsDetail(editData.id)
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  50px;
  font-size:14px;
}
.tree .el-col span{
  font-weight:700;
}
</style>
